<!-- 全屏地图 -->
<template>
  <div class="full-map">
      <dv-border-box-7>
        <Emap v-if="simpleMap" @get-center="toCenter"></Emap>
        <BdMap v-else :revCenter="bdCenter"></BdMap>
      </dv-border-box-7>
      <!-- <div class="changeMap map-col" @click="changeMap">
        <span>{{ this.simpleMap ? '路线图' : '轮廓图' }}</span>
      </div> -->
      <div class="full-screen map-col" @click="changeFullScreen">
          <span>详细地图</span>
      </div>
  </div>
</template>

<script>
import Emap from "../map/Emap";
import BdMap from "../map/BdMap";

export default {
  // import引入的组件需要注入到对象中才能使用
  components: { Emap, BdMap },
  data() {
    //这里存放数据
    return {
      simpleMap: true,
      isFullScreen: true,
      targetCenter: [],
      bdCenter: {
        lng: 119.223449,
        lat: 34.623639
      }
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeMap() {
      this.simpleMap ? (this.simpleMap = false) : (this.simpleMap = true);
      console.log(this.simpleMap);
    },
    changeFullScreen () {
        this.$router.push({
                name: 'full-map',
                params: {
                    isFull: this.isFullScreen
                }
            })
    },
    toCenter (data) {
        console.log('我是FULL-MAP'+ this.$store.state.center);
        let center = [data[1], data[0]]
        console.log(center);
        this.targetCenter = center
        this.simpleMap = false
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {  
    this.isFullScreen = this.$route.params.isFull || false
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.full-map {
    width: 100%;
    height: 100%;
    border-radius: 1%;
    margin: 0 auto;
    overflow: hidden;
    // background-color: rgba(0, 0, 0, 0.3);
    position: relative;
    .map-col {
      width: 1.5rem;
      height: 0.2rem;
      height: 8%;
      border-radius: 5%;
      background-color:@Blue;
      position: absolute;
      // left: 2%;
      bottom: 2%;
      span {
        color: #eee;
        font-size: 0.16rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
      }
    }
    .map-col:hover {
      background-color: @Green;
    }
    .changeMap {
      left: 2%;
    }
    .full-screen {
      right: 2%;
      background-color: @FontBlue;
    }
}
</style>